<?php
require_once("include/auth.php");
require_once("include/db.php");

$title = "Device List";
require('include/header.php');

$devices = query_device($_SESSION['user_id']);
?>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AmCDLiYiEmBn2vpryV3C5U4L"></script>

<!-- Begin page content -->
<div class="container">
    <div class="page-header">
        <h1>Device Information</h1>
    </div>
    <div class="page-content">
        <table class="table table-striped table-hover" id="TableA">
            <thead>
                <tr>
                    <th width="25%"> Device Name </th>
                    <th width="25%"> Device Location (latitude, longitude) </th>
                    <th width="25%"> Token </th>
                    <th width="25%"> Registration Time </th>
                </tr>
            </thead>
            <tbody>
            <?php while ($device = mysql_fetch_assoc($devices)): ?>
            <tr>
                <td> <?php echo $device['Device_Name']; ?> </td>
                <td> <?php
                    $location = get_device_location($device['ID']);
                    if (is_null($location))
                        echo "N/A";
                    else
                        echo '<a href="map.php?token=' . $device['Token'] . '">(' . $location['Latitude'] . ', ' . $location['Longitude'] . ")</a>";
                ?> </td>
                <td> <?php echo $device['Token']; ?> </td>
                <td> <?php echo $device['Register_Date']; ?> </td>
            </tr>
            <?php endwhile; ?>
            <tr class="new-device">
                <form method="POST" action="newdevice.php" id="register-form">
                    <td><input type="text" name="name"></td>
                    <td>(<input type="text" name="latitude" class="location-input">, <input type="text" name="longitude" class="location-input">)</td>
                    <td></td>
                    <td><input type="submit" value="Submit"></td>
                </form>
            </tr>
            </tbody>
        </table>
        <button id="add" type="button">Add new device</button>
        <div id="location" class="new-device">
            <h4>You can click on the map to set a location.</h4>
            <div id="allmap"></div>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/new-device.js"></script>

<?php require('include/footer.php'); ?>
